<template>
  <svg
    :class="svgClass"
    :width="width"
    :height="height"
    :viewBox="viewBox"
    :style="svgStyle"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- 如果传入了icon属性，则渲染对应的预定义图标 -->
    <template v-if="icon">
      <component :is="getIconComponent(icon)" :fill="fill" :stroke="stroke" :stroke-width="strokeWidth" />
    </template>
    <!-- 否则渲染传入的自定义内容 -->
    <slot v-else></slot>
  </svg>
</template>

<script>
// 导入预定义的SVG图标组件
const WhiteCircle = {
  render(h) {
    return h('circle', {
      attrs: {
        cx: '5',
        cy: '5',
        r: '5',
        fill: this.fill || 'white',
        stroke: this.stroke || 'none'
      }
    });
  },
  props: ['fill', 'stroke']
};

export default {
  name: 'SvgIcon',
  props: {
    // 预定义图标名称
    icon: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 24
    },
    // 高度
    height: {
      type: [Number, String],
      default: 24
    },
    // 视图框
    viewBox: {
      type: String,
      default: '0 0 24 24'
    },
    // 填充颜色
    fill: {
      type: String,
      default: 'currentColor'
    },
    // 描边颜色
    stroke: {
      type: String,
      default: 'none'
    },
    // 描边宽度
    strokeWidth: {
      type: [Number, String],
      default: 1
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 自定义类名
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 合并类名
    svgClass() {
      return [this.className, 'svg-icon'].join(' ').trim();
    },
    // 合并样式
    svgStyle() {
      return {
        display: 'inline-block',
        verticalAlign: 'middle',
        ...this.customStyle
      };
    }
  },
  methods: {
    // 获取对应图标的组件
    getIconComponent(iconName) {
      const iconMap = {
        'white-circle': WhiteCircle
        // 可以在这里添加更多预定义图标
      };
      return iconMap[iconName] || null;
    }
  },
  // 注册局部组件
  components: {
    WhiteCircle
  }
};
</script>

<style scoped>
.svg-icon {
  /* 基础样式 */
  transition: all 0.3s ease;
}
</style>